<div th:replace="~{sidebar :: layout('首页', ~{::#css}, ~{::#mainContent}, _)}" xmlns:th="http://www.thymeleaf.org">
    <link rel="stylesheet" th:href="@{/css/classify/index.css}" id="css">
    <!-- 主内容区域 -->
    <div class="main-content" id="mainContent">
        <div class="header">
            <h1 id="contentTitle">仪表盘</h1>
            <button class="toggle-sidebar" id="toggleSidebar">☰</button>
        </div>

        <div class="card">
            <h2>欢迎使用</h2>
            <p></p>
        </div>

        <div class="card" id="contentArea">
            <h2>仪表盘概览</h2>
            <p>这里是仪表盘的内容区域。您可以看到系统的基本信息和统计数据。</p>
            <div style="margin-top: 20px;">
                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 200px; background: #e3f2fd; padding: 15px; border-radius: 5px;">
                        <h3>客户</h3>
                        <p style="font-size: 24px; font-weight: bold;" th:text="${userCount} ? ${userCount} : '暂无'">
                            客户量</p>
                    </div>
                    <div style="flex: 1; min-width: 200px; background: #e8f5e9; padding: 15px; border-radius: 5px;">
                        <h3>订单数</h3>
                        <p style="font-size: 24px; font-weight: bold;" th:text="${saleCount} ? ${saleCount} : '暂无'">
                            销售量</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>